<template>
  <div>
    <van-nav-bar title="站点详情" left-text="返回" left-arrow @click-left="onClickLeft" />
  </div>

  <!-- 输出站点详情 -->
  <div v-if="currentStation" style="background-color: white;margin-bottom: 5px;height: 100px;">
    <div class="container">
      <div class="detail-div-one">
        <div style="background-color: white;height: 100px;width: 97%;">
          <van-space :align="align">
            <div style="height: 48px; width: 200px;">
              <h4 style="margin-top: 3px;margin-bottom: 3px">{{ currentStation.stationName }}</h4>
              <div style="display: flex;">
                <img style="height: 20px;" alt="Vue logo" src="../../images/24hours.png">
                <div style="margin-left: 3px;"> 小时 | 非专用</div>
              </div>
            </div>
            <div style="height: 48px; width: auto;background-color: white;padding-top: 5px">
              <div style="color: blue;font-weight: bolder;font-size: 18px;">{{ currentStation.price }}/度</div>
              <div style="color: lightgray;font-weight: bold;font-size: 14px;text-decoration: line-through;">
                {{ currentStation.originalPrice }}/度
              </div>
            </div>
          </van-space>
          <div style="display: flex;height: 20px;">
            <div style="background-color: red;">空：18</div>
            <div style="background-color: cyan;">共：20</div>
          </div>
          <div class="station-footer" style="display: flex;margin-bottom: 5px;padding-top: 10px;">
            <div style="margin-left: 3px;font-size: 12px;"> {{ currentStation.address }}</div>
            <div style="display: flex;margin-left:auto;margin-right: 0%;">
              <div style="text-align: right;"> 3.3Km</div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-div-two">
        <img style="height: 80px;width: 97%;margin-bottom :80px;" src="../../images/station.jpg" alt="">
      </div>
      <div class="detail-div-three">
        <div class="detail-div-three-left">
          <div style="font-size: 14px;">
            <div>
              <span style="background-color: burlywood;color: rgb(255, 255, 255);">T</span>
              <span>营业时间：</span>
              <span>{{ currentStation.businessStartTime }}--{{ currentStation.businessEndTime }}</span>
            </div>
            <div>
              <span style="background-color: aqua;">P</span>
              <span>停车费用：</span>
              <span>{{ currentStation.parkFee }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-div-four">
        <van-tabs v-model:active="active">
          <van-tab title="详情"></van-tab>
          <van-tab title="终端"></van-tab>
          <van-tab title="评论"></van-tab>
        </van-tabs>
        <van-divider />
        <div class="detail-content-div">
          <span style="font-size: 18px;font-weight: bold;">电站简介</span><br />
          <span>{{ currentStation.remark }}</span>
        </div>
      </div>

      <div class="detail-div-five">
        <van-tabbar v-model="active">
          <van-tabbar-item
              icon="star-o"
              @click="Collect(currentStation)"
              :class="{'glow': isCollected}"
          >
            收藏
          </van-tabbar-item>
          <van-tabbar-item icon="share-o" @click="Share()">分享</van-tabbar-item>
          <van-tabbar-item icon="column" @click="Opt()">操作指南</van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import { GetStationListxq } from '@/api/station';
import { ShouId,ShouId1 } from '@/api/station';
import { Toast } from 'vant';

// 获取路由的查询参数
const route = useRoute();
const stationInfo = ref([]);
const currentStation = ref(null);

// 表示当前站点是否已被收藏
const isCollected = ref(false);

// 在组件挂载后获取数据
onMounted(() => {
  const stationId = route.query.id;  // 获取传递的站点 ID

  // 获取站点列表数据
  function getStationInfo() {
    GetStationListxq().then(res => {
      if (res.data.code === 200000) {
        stationInfo.value = res.data.data;
        console.log('获取站点列表成功:', stationInfo.value);

        // 根据传递的 id 查找当前站点
        currentStation.value = stationInfo.value.find(station => station.id === parseInt(stationId));
        if (!currentStation.value) {
          console.error('未找到对应的站点信息');
        } else {
          // 根据数据库中的 sc 字段初始化收藏状态
          isCollected.value = currentStation.value.sc === 1;
        }
      } else {
        console.error('获取站点列表失败:', res.data.message);
      }
    }).catch(err => {
      console.error('获取站点列表出错:', err);
    });
  }

  getStationInfo();
});

const onClickLeft = () => history.back();

// 收藏/取消收藏功能
function Collect(item) {
  console.log(item.id);

  // 根据当前的收藏状态来决定是收藏还是取消收藏
  if (isCollected.value) {
    // 如果当前已收藏，调用取消收藏接口
    console.log('取消收藏');
    ShouId1(item.id).then(res => {
      if (res.data.code === 200000) {
        // 取消收藏成功，更新收藏状态
        isCollected.value = false;
        Toast.success('取消收藏成功');
        console.log('取消收藏状态更新成功');
      } else {
        console.error('取消收藏失败:', res.data.message);
      }
    }).catch(err => {
      console.error('取消收藏接口调用失败:', err);
    });
  } else {
    // 如果当前未收藏，调用收藏接口
    console.log('收藏');
    ShouId(item.id).then(res => {
      if (res.data.code === 200000) {
        // 收藏成功，更新收藏状态
        isCollected.value = true;
        Element.success('收藏成功');
        console.log('收藏状态更新成功');
      } else {
        console.error('收藏失败:', res.data.message);
      }
    }).catch(err => {
      console.error('收藏接口调用失败:', err);
    });
  }
}

function Share() {
  console.info('分享');
}

function Opt() {
  console.info('操作指南');
}
</script>


<style>
/* 默认图标 */
.van-icon {
  transition: all 0.3s ease;
}

/* 发光效果 */
.glow {
  color: #ffeb3b;  /* 发光颜色 */
  text-shadow: 0 0 10px rgba(255, 235, 59, 0.8), 0 0 20px rgba(255, 235, 59, 0.6);
}
</style>
